import Header from './components/Header'
import AppContent from './components/AppContent'
import SideMenu from './components/SideMenu'
import { useGlobalConf } from '@/stores/globalConf';
export default function Home() {
  const {menuCollapsed} = useGlobalConf()
  return (
    <div className="flex h-screen dark:bg-gray-800 dark:text-white">
      <aside className={`overflow-y-auto h-full duration-500 ${menuCollapsed ? 'w-16' : 'w-52'}`} >
        <SideMenu/>
      </aside>
      <main className="flex flex-col flex-1 w-24 h-full">
        <nav className="bg-white border-b border-gray-200">
          <Header />
        </nav>
        <section className="flex-1 h-24 bg-gray-100 p-4">
          <AppContent />
        </section>
      </main>
    </div>
  )
}